<template>
	<div>
		<el-form-item
			label="题干"
			prop="questionTitle"
			:rules="{
				required: true,
				message: '请输入题干',
				trigger: ['blur', 'change']
			}"
		>
			<template>
				<el-input v-model.trim="questionForm.questionTitle" maxlength="2000">
					<i
						slot="suffix"
						@click="handleEdit(questionForm.questionTitle,'questionTitle')"
						class="el-icon-edit-outline icons"
					/>
				</el-input>
			</template>
		</el-form-item>
		<el-form-item
			label="答案"
			required
			class="item-answer"
		>
			<div class="options-group">
				<el-form-item
					v-for="(item, index) in questionForm.optionList"
					:key="index"
					:prop="'optionList.' + index"
					:rules="{
						required: true, validator:validateOption, trigger: ['blur', 'change']
					}"
				>
					<el-input v-model.trim="item.answerOption" maxlength="2000">
						<i
							slot="suffix"
							@click="handleEdit(item.answerOption,'optionList',index)"
							class="el-icon-edit-outline icons"
						/>
					</el-input>
				</el-form-item>
			</div>
		</el-form-item>
		<el-form-item
			label="智能阅卷关键词"
			prop="questionKeywords"
		>
			<el-input v-model.trim="questionForm.questionKeywords" maxlength="500" />
			<div class="tips">Tips：多个关键词中间用※连接。近义关键词中间用“丨”分隔。多个关键词共占一个分值，外部用{}包括</div>
		</el-form-item>
		<el-form-item
			label="关键词得分权重"
			prop="questionScoreWeight"
		>
			<el-input v-model.trim="questionForm.questionScoreWeight" maxlength="500" />
			<div class="tips">Tips：系统将根据关键词权重进行智能判分。权重顺序需要和关键词顺序对应，格式：数字1※数字2※数字N...</div>
		</el-form-item>
	</div>
</template>
<script >
	export default {
		name: "q-blank-edit",
		props: {
			value: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				questionForm: {}
			};
		},
		watch: {
			value: {
				immediate: true,
				deep: true,
				handler(val) {
					this.questionForm =  JSON.parse(JSON.stringify(val));;
					if (!val.optionList || !val.optionList.length) {
						this.$set(this.questionForm, "optionList", [
							{
                                optionSeq:'A',
								answerOption: "",
								isAnswer: "Y",
                                answerSeq:1
							}
						]);
					}
				}
			},
            'questionForm.optionList':{
                immediate:true,
                deep: true,
                handler(val){
                    val && this.setAnswer();
                }
            },
            questionForm:{
                immediate:true,
                deep: true,
                handler(val){
                    this.$emit('change',val);
                }
            }
		},
		methods: {
			//校验单选选项
			validateOption(rule, value, callback) {
				if ( value.answerOption === undefined || value.answerOption === ""){
                    return callback(new Error("答案不能为空"));
                }
				callback();
			},
			// 编辑
			handleEdit(value, key, index) {
				this.$emit("edit", value, key, index);
			},
            setAnswer(){
                const answerOptionList = this.questionForm.optionList.filter( option=>option.isAnswer==='Y');
                const answerList =  answerOptionList.map(option=>option.answerOption);
                this.questionForm.answer =  answerList.join(',');
            }
		}
	};
</script>
<style scoped lang="less">
	.options {
		display: flex;
		flex-direction: row;
	}
	.add-btn {
		margin: 0 10px;
	}
	.m-t15 {
		margin-top: 15px;
	}
	.tips {
		color: #666;
		font-size: 12px;
		line-height: 20px;
		display: block;
        margin-top: 5px;
	}
	.icons {
		cursor: pointer;
		font-size: 20px;
		margin-top: 7px;
	}
	.options-item {
		margin-bottom: 15px;
		display: flex;
	}
    .item-answer{
        margin-bottom: 0px;
    }
</style>
